<template>
  <view class="appraisel">
    <view class="text1">
      <image
        src="../../static/iamges/yinhangkatianjia/fanhui.png"
        mode=""
      ></image>
      <view> 风险测评 </view>
    </view>
    <view
      class="text"
      v-for="(item, ind) in datas"
      :key="ind"
      v-show="code == item.code"
    >
      <view class="text2">
        <view class="h1"> {{ item.code }}</view>
        <view class="h2"> /13 </view>
      </view>
      <view class="text3"
        >{{ item.problemDescription }}
        <view class="outline" />
      </view>
      <view class="text4" v-for="(data, index) in item.answer" :key="data">
        <view>
          <view
            :class="item.pitch == index ? 'pitch' : 'option'"
            @click="pitch(ind,index)"
          >
            {{ data }}</view
          >
          <view class="outline" />
        </view>
      </view>
    </view>
    <view class="button">
      <button class="bt1" @click="reduce">上一题</button>
      <button
        class="bt2"
        @click="add()"
        v-show="code != 3"
        :disabled="datas[ind].pitch"
      >
        下一题
      </button>
      <button class="bt2" @click="submit(code)" v-show="code == 3">提交</button>
    </view>
    <view class="text5">
      {{ txtx }}
    </view>
  </view>
</template>


<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("user");
export default {
  data() {
    return {
      datas: [
        {
          code: 1,
          problemDescription: "您的学历？",
          answer: [
            "a.硕士及以上",
            "b.本科",
            "c.大专",
            "d.高中/中专",
            "e.初中及以下",
          ],
          pitch: 51,
        },
        {
          code: 2,
          problemDescription: "您的职业为？",
          answer: [
            "a.一般企业单位员工",
            "b.私营业主或企事业单位管理人员",
            "c.专业技术人员",
            "d.金融行业从业人员",
            "e.无固定职业",
          ],
          pitch: 11,
        },
        {
          code: 3,
          problemDescription: "您的主要收入来源是？",
          answer: [
            "a.工资、劳动报酬",
            "b.生产经营所得",
            "c.利息、股份、转让证券等金融性资产收入",
            "d.出租、出售房地产等非金融性资产收入",
            "e.无固定收入",
          ],
          pitch: 11,
        },
        {
          code: 4,
          problemDescription: "您的家庭可支配年收入为？",
          answer: [
            "a.10万元以下",
            "b.10-30万元",
            "c.30-50万元",
            "d.50-100万元",
            "e.100万元以上",
          ],
          pitch: -1,
        },
        {
          code: 5,
          problemDescription: "您的家庭可支配收入中，可用于金融投资比例为？",
          answer: [
            "a.10万元以下",
            "b.10-30万元",
            "c.30-50万元",
            "d.50-100万元",
            "e.100万元以上",
          ],
          pitch: -1,
        },
        {
          code: 6,
          problemDescription: "您是否有尚未清偿的债务？",
          answer: [
            "a.没有",
            "b.有，住宅抵押贷款等长期定额债务",
            "c.有，信用卡未偿还欠款、消费信贷等短期信用债务",
            "d.有,亲朋之间大额借款",
            "e.有,且包含以上多项债务类型",
          ],
          pitch: -1,
        },
        {
          code: 7,
          problemDescription: "您的投资经验可描述为?",
          answer: [
            "a.较少:除银行活期账户和定期存款外，基本没有其他投资经验",
            "b.—般:除银行活期账户和定期存款外，还买过国债、基金、保险中的低风险产品",
            "c.比较丰富:有一定的投资经验,除投资于存款、低风险产品外，还购买过股票、基金等风险产品，但需要进—步的投资指导",
            "d.丰富:比较有经验的投资者，资产均衡地分布于存款、国债、银行理财产品、信托产品、股票、基金等,并倾向于自己做出投资决策",
            "e.非常丰富:非常有经验的投资者",
          ],
          pitch: -1,
        },
        {
          code: 8,
          problemDescription: "您有多少年基金、股票等投资经验？",
          answer: [
            "a.没有经验",
            "b.少于两年",
            "c.2至5年",
            "d.5至10年",
            "e.10年以上",
          ],
          pitch: -1,
        },
        {
          code: 9,
          problemDescription: "您计划的投资期限是多久？",
          answer: [
            "a.1年以下",
            "b.1年至2年",
            "c.2至3年",
            "d.3至5年",
            "e.5年以上",
          ],
          pitch: -1,
        },
        {
          code: 10,
          problemDescription: "您的投资目的是？",
          answer: [
            "a.资产保值",
            "b.资产保值，可有固定收益",
            "c.资产文件增长",
            "d.资产快速且稳健增长",
            "e.资产迅速增长",
          ],
          pitch: -1,
        },
        {
          code: 11,
          problemDescription: "以下哪项最符合您的投资态度?",
          answer: [
            "a.厌恶风险，不希望本金损失,希望获得稳定回报",
            "b.保守投资,不希望本金损失,愿意承担一定幅度的收益波动",
            "c.对风险不是很反感,愿意承担风险并持续获得收益",
            "d.寻求资金的较高收益和成长性,愿意为此承担有限本金损失",
            "e.希望赚取高回报,愿意为此承担任何本金损失",
          ],
          pitch: -1,
        },
        {
          code: 12,
          problemDescription: "您认为能承受的最大投资损失是多少？",
          answer: [
            "a.不能承受损失",
            "b.10%以内",
            "c.10%-30%",
            "d.30%-50%",
            "e.超过50%",
          ],
          pitch: -1,
        },
        {
          code: 13,
          problemDescription: "您的诚心记录是否良好？",
          answer: ["a.是", "b.否"],
          pitch: -1,
        },
      ],
      code: 1,
      txtx:
        "温馨提示:填写进行测评问卷时,请您确保选项真实、准确、完整和有效可靠。如问卷中存在欺诈、隐瞒或有其他不实陈述而导致问卷结果与投资实际情况不符,甚至出现投资亏损等情况的,本平台及合作机构不承担任何责任。",
    };
  },
  methods: {
    ...mapActions(["userRiskTest"]),
    add() {
      this.code++;
    },
    reduce() {
      if (this.code > 1) {
        this.code--;
      }
    },
    pitch(ind, index) {
      this.datas[ind].pitch = index;
      console.log(this.datas[ind].pitch,'123');
    },
    // 计算总分
    sum() {
      return this.datas.reduce((pre, cur) => {
        return pre + cur.pitch;
      }, 0);
    },

    // 提交 // 更新风险
    async submit(code) {
      const data = this.sum();
      // console.log(data);
      const value = await this.userRiskTest({
        userInfoAssessmentLevelScore: data,
      });
      console.log(value, "value");
      uni.reLaunch({
        url: "/pages/assess/assess?type=" + value.data,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.appraisel {
  .button {
    display: flex;
    padding: 20rpx 0;
    button {
      border-radius: 50rpx;
      width: 300rpx;
    }
    .bt2 {
      color: rgb(255, 255, 255);
      background-color: red;
    }
  }
  .text1 {
    height: 100rpx;
    display: flex;
    padding-top: 30rpx;
    image {
      width: 15rpx;
      height: 25rpx;
      padding-left: 26rpx;
    }
    view {
      color: #333333;
      text-align: center;
      font-size: 36rpx;
      font-family: "PingFang sc";
      width: 100%;
    }
  }
  .text {
    .text2 {
      display: flex;
      font-family: "DINPro";
      color: #ff4658;
      align-items: flex-end;
      font-size: 24pt;
      padding-left: 14pt;
      .h1 {
        font-size: 50pt;
        color: #ff4658;
        line-height: 90%;
      }
    }
    .text3 {
      color: #ff4658;
      font-size: 40rpx;
      font-family: "PingFang sc";
      padding: 34rpx 0 0 46rpx;
      .outline {
        border-top: 2rpx solid #f3f3f3;
        //   border-top: 1pt solid red;
        width: calc(100vw * 323 / 375);
        margin-top: 36rpx;
      }
    }
    .text4 {
      display: flex;
      flex-direction: column;
      padding: 0 54pt 0 50rpx;

      .outline {
        border-bottom: 2rpx solid #ff0000;
        width: calc(100vw * 323 / 375);
        // text-align: center;
        padding-top: 38rpx;
      }
      .option {
        color: #333333;
        font-size: 28rpx;
        align-items: flex-start;
        padding-top: 38rpx;
      }
    }
  }

  .text5 {
    font-size: 24rpx;
    color: #cdcdcd;
    background-color: #f3f3f3;
    padding: 52rpx 50rpx 0;
  }
  .pitch {
    color: #015bfd;
    font-size: 28rpx;
    align-items: flex-start;
    padding-top: 38rpx;
  }
}
</style>
